<template>
  <div
    class="box clearfix"
  >
    <div
      class="slide float_left"
      :class="[!show_child?'width98':'']"
    >
      <div
        class="logo-wrp"
        :class="[!show_child?'width98':'']"
        @click="$router.push({path: '/'})"
      >
        <img
          :src="logoImg"
          class="logo"
          :class="[!show_child?'widthlogo50':'']"
        />
        <span
          v-if="show_child"
          style="font-size: 16px"
        >{{ title.substr(0,8) }}</span>
      </div>
      <SlideMenu @showChild="showChild"></SlideMenu>

      <div class="user-view">
        <el-tooltip
          placement="top"
          effect="light"
        >
          <div
            slot="content"
            class="logout-btn"
            @click="loginOut"
          >
            退出登录
          </div>
          <div
            style="margin-top: 10px"
            slot="content"
            class="logout-btn"
            @click="changePassword"
          >
            修改密码
          </div>
          <div>
            <img
              :src="logoImg"
              class="logo"
            />
            <p>{{ userInfo.userName||userInfo.phone }}</p>
          </div>
        </el-tooltip>
      </div>
    </div>

    <!--<HeadCount></HeadCount>-->
    <div
      class="main-wrp float_left"
      :class="[!show_child?'main-width-98':'']"
    >
      <LayoutHead></LayoutHead>
      <div
        class="main"
      >
        <NavTabs></NavTabs>
        <div
          class="main-bg"
          id="loading-view"
        >
          <transition
            name="fade-transform"
            mode="out-in"
          >
            <Cache
              :keys="cacheRouterPath"
              v-if="NODE_ENV === 'production'"
            >
              <!-- <Cache
                :keys="cacheRouterPath"
                v-if="true"
              >-->
              <router-view :key="$route.path" />
            </Cache>
            <router-view
              v-else
              :key="$route.path"
            />
          </transition>
        </div>
      </div>
    </div>
    <HelpCenter />
    <!--    修改密码-->
    <ChangePassword
      v-if="changePasswordShow"
      :show="changePasswordShow"
      :user-mode="true"
      :user-id=" this.userInfo.userId"
      @close="changePasswordShow = false"
    />
  </div>
</template>

<script>
  import LayoutHead from '@/pages/layout/Header'
  import SlideMenu from '@/pages/layout/SlideMenu'
  import NavTabs from '@/pages/layout/NavTabs'
  import HelpCenter from '@/pages/layout/HelpCenter'
  import { mapState, mapActions } from 'vuex'
  import ChangePassword from '@/pages/base/staff/ChangePassword'

  export default {
    name: 'Layout',
    components: {
      ChangePassword,
      LayoutHead,
      SlideMenu,
      NavTabs,
      HelpCenter
    },
    data () {
      return {
        title: TITLE,
        changePasswordShow: false,
        logoImg: '',
        show_child: true,
        NODE_ENV: process.env.NODE_ENV,
        userInfo: {
          userName: '',
          avatar: '',
          phont: ''
        }
      }
    },
    computed: {
      ...mapState({
        routerTabs: state => state.routerTabs,
        pageHeight: state => state.pageHeight
      }),
      cacheRouterPath () {
        return this.routerTabs.reduce((container, item) => {
          const { path } = item
          if (path) {
            container.push(path)
          }
          return container
        }, [])
      }
    },
    watch: {
      '$route' (to, from) {
        this.getViewPageHeight()
      }
    },
    created () {
      const userInfo = JSON.parse(sessionStorage.getItem('user_info'))
      this.userInfo.userName = userInfo.userName
      this.userInfo.phone = userInfo.phone
      this.userInfo.userId = userInfo.userId
      this.getFormTypes()
      // 开启websocket
      const ws = this.$service.websocket.linkWsbsocket(userInfo.phone)
      ws.onmessage = (evt) => {
        let result = {}
        try {
          result = JSON.parse(evt.data)
        } catch (e) {
          console.log(e)
        }
        console.log(result)
        this.onwebSocketMessage(result)
      }
    },
    mounted () {
      let route = {
        path: this.$route.path,
        meta: this.$route.meta
      }
      localStorage.setItem('firstNav', JSON.stringify(route))
      this.getViewPageHeight()
    },
    methods: {
      ...mapActions({
        pushRouter: 'routerTabsPush',
        closeAllRoute: 'closeAllRoute',
        getViewPageHeight: 'getViewPageHeight',
        setFormTypes: 'setFormTypes'
      }),
      onwebSocketMessage (msgEntity) {
        const { noticeTyp } = msgEntity
        // 审批通知
        if (noticeTyp === 'APPROVAL') {
          const notice = this.$notify.info({
            title: '待审批通知',
            message: '有一条新流程信息需要您及时审批 (点击查看)',
            duration: 0,
            position: 'bottom-right',
            onClick: () => {
              this.$router.push(`/approval/Progressdetail/${msgEntity.taskId}`)
              setTimeout(() => {
                notice.close()
              }, 100)
            }
          })
        }
        if (noticeTyp === 'APPROVAL_RESULT') {
          const { resultStatus } = msgEntity
          const resultText = resultStatus === 'FAIL' ? '被拒绝' : '已通过'
          const status = resultStatus === 'FAIL' ? 'error' : 'success'
          const notice = this.$notify[status]({
            title: `审批${resultText}通知`,
            message: `您有一条审批${resultText} (点击查看)`,
            duration: 0,
            position: 'bottom-right',
            onClick: () => {
              this.$router.push(`/approval/Progressdetail/${msgEntity.taskId}`)
              setTimeout(() => {
                notice.close()
              }, 100)
            }
          })
        }
      },
      changePassword () {
        this.changePasswordShow = true
      },
      async getFormTypes () {
        const { data } = await this.$service.gzl.getFormTypes()
        this.setFormTypes(data.data)
      },
      showChild (isShow) {
        this.show_child = isShow
      },
      loginOut () {
        this.$confirm('确定要退出登录吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          sessionStorage.clear()
          this.closeAllRoute()
          this.$router.push('/login')
        })
      }
    }
  }
</script>

<style scoped>
  .box {
    min-width: 1000px;
  }

  .main-wrp {
    /*display: flex;*/
    overflow: hidden;
    /*margin-top: 12px;*/
    width: calc(100% - 210px);
  }

  .main-width-98 {
    width: calc(100% - 98px);
  }

  .slide {
    position: relative;
    background: #fff;
    width: 210px;
    transition: .15s;
    /*overflow-x: hidden;*/
    /*margin-right: 24px;*/
    box-shadow: 4px 4px 18px 0px rgba(79, 94, 123, 0.24);
  }

  .main-bg {
    background-color: #ffffff;
    /*height: calc(100vh - 215px);*/
    height: calc(100vh - 145px);
    overflow-y: auto;
    /*padding-bottom: 15px;*/
    overflow-x: hidden;
  }

  .main {
    display: block;
    flex: 1;
    margin-right: 24px;
    /*padding-bottom: 20px;*/
    overflow: hidden;
    min-width: 1000px;
    margin-top: 12px;
    margin-left: 20px;
  }

  .logo-wrp {
    width: 210px;
    display: inline-block;
    cursor: pointer;
    /*padding: 0 12px;*/
    /*font-weight: 500;*/
    font-size: 20px;
    background: #243247;
    color: #fff;
    line-height: 60px;
  }

  .logo-wrp .logo {
    width: 40px;
    height: 38px;
    vertical-align: top;
    margin-top: 10px;
    margin-right: 8px;
    margin-left: 12px;
  }

  .logo-wrp .widthlogo50 {
    width: 50px;
    height: 47px;
    margin-left: 22px;
  }

  .width98 {
    width: 98px;
  }

  .user-view .logo {
    width: 40px;
    height: 38px;
    margin-bottom: 8px;
  }

  .user-view {
    position: absolute;
    bottom: 42px;
    left: 0;
    color: #fff;
    font-size: 12px;
    text-align: center;
    width: 98px;
  }

  .logout-btn {
    cursor: pointer;
  }
</style>
